{% extends 'core/base.html' %}
{% load static %}

{% block title %}提交反馈 - 社区管理系统{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h4>
                        <i class="fas fa-comments text-info"></i> 提交意见反馈
                    </h4>
                    <p class="mb-0 text-muted">我们重视您的每一个建议，请详细描述您遇到的问题或建议。</p>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label for="content" class="form-label">反馈内容 *</label>
                            <textarea class="form-control" id="content" name="content" rows="8" 
                                      placeholder="请详细描述您的问题或建议..." required></textarea>
                            <div class="form-text">请尽量详细地描述问题，以便我们更好地为您解决。</div>
                        </div>
                        
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i>
                            <strong>温馨提示：</strong>
                            <ul class="mb-0 mt-2">
                                <li>反馈内容将由社区管理人员进行审核和处理</li>
                                <li>我们会在1-3个工作日内给予回复</li>
                                <li>如有紧急情况，请联系社区服务热线</li>
                            </ul>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{% url 'feedbacks_list' %}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> 返回列表
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-paper-plane"></i> 提交反馈
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 字符计数
document.getElementById('content').addEventListener('input', function() {
    const maxLength = 1000;
    const currentLength = this.value.length;
    
    // 创建或更新字符计数显示
    let counter = document.getElementById('char-counter');
    if (!counter) {
        counter = document.createElement('div');
        counter.id = 'char-counter';
        counter.className = 'form-text text-end';
        this.parentNode.appendChild(counter);
    }
    
    counter.textContent = `${currentLength}/${maxLength} 字符`;
    
    if (currentLength > maxLength * 0.9) {
        counter.className = 'form-text text-end text-warning';
    } else if (currentLength >= maxLength) {
        counter.className = 'form-text text-end text-danger';
    } else {
        counter.className = 'form-text text-end text-muted';
    }
});
</script>
{% endblock %}
